<template>
  <div class="container">
    <div class="newSong">新歌速递</div>
    <div class="country">
      <span class="all" @click="getAll" :class="{ choiced: all }">全部</span>
      <span class="chinese" @click="getChi" :class="{ choiced: chi }"
        >华语</span
      >
      <span class="english" @click="getEng" :class="{ choiced: eng }"
        >欧美</span
      >
      <span class="japan" @click="getJap" :class="{ choiced: jap }">日本</span>
      <span class="korea" @click="getKor" :class="{ choiced: kor }">韩国</span>
    </div>
    <!-- <div class="imgs" v-for="(newSong,index) in newSongs" :key="index">
      <div><img :src="newSong.album.blurPicUrl" alt=""></div>
      <div>{{newSong.starred}}</div>
    </div> -->
    <!-- <img :src="newSongs.album.blurPicUrl" alt=""> -->
    <!-- <div>{{newSongs.album.name}}</div> -->
  </div>
</template>

<script>
import { resNewSongs } from "@/api";
export default {
  name: "new",
  data() {
    return {
      //请求传回来的所有数据
      newSongs: {
        album: {
          blurPicUrl: "",
          name:''
        },
        // album.name 歌名
        // album.artists.name 歌手
        // album.blurPicUrl 图片
      },
      //请求的传递类型
      type: "0",
      //是否被选中
      all: "true",
      chi: "",
      eng: "",
      jap: "",
      kor: "",
    };
  },
  mounted() {
    this.getNewSong();
  },
  methods: {
    //发送请求
    async getNewSong() {
      await resNewSongs(this.type)
        .then((res) => {
          // console.log(res);   blurPicUrl
          // console.log(this.newSongs);
          this.newSongs = res.data.data;
          console.log(this.newSongs.album);
        })
        .catch((error) => {
          alert(error);
        });
    },
    //更改传递参数
    getAll() {
      this.type = 0;
      (this.all = true),
        (this.chi = false),
        (this.eng = false),
        (this.jap = false),
        (this.kor = false),
        this.getNewSong();
    },
    getChi() {
      this.type = 7;
      (this.all = false), (this.chi = true);
      (this.eng = false),
        (this.jap = false),
        (this.kor = false),
        this.getNewSong();
    },
    getEng() {
      this.type = 96;
      (this.all = false), (this.chi = false), (this.eng = true);
      (this.jap = false), (this.kor = false), this.getNewSong();
    },
    getJap() {
      this.type = 8;
      (this.all = false),
        (this.chi = false),
        (this.eng = false),
        (this.jap = true);
      (this.kor = false), this.getNewSong();
    },
    getKor() {
      this.type = 16;
      (this.all = false),
        (this.chi = false),
        (this.eng = false),
        (this.jap = false),
        (this.kor = true),
        this.getNewSong();
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  text-align: center;
  font-family: cursive;
  .newSong {
    font-size: 2em;
    padding: 1em;
  }
  .country {
    margin: 0em 25em;
    display: flex;
    justify-content: space-around;
    span {
      font-size: 1.1em;
    }
    span:hover {
      color: rgb(206, 5, 5);
    }
  }
  .choiced {
    color: rgb(206, 5, 5);
  }
}
</style>